<template>
  <div>
    <main class="Body">
      <div class="mapBox">
        <div id="aMap"></div>
        <a
          href="https://720yun.com/t/3evkcb8w08y#scene_id=68128643"
          class="mapvr"
          >720全景</a
        >
        <!-- <amap ref="myMap" :features="features" :center="centerPoint" :zoom="15" >
          <amap-circle :center="centerPoint" :radius="320" />
        </amap> -->
      </div>
      <div class="contBox">
        <div class="cellT">
          <div class="inner"><span></span>周边商圈</div>
        </div>
        <div class="grayLine"></div>
        <div class="scrollBox">
          <!-- 滚动 -->
          <div
            class="scrollItem"
            v-for="(item, index) in storeList"
            :key="index"
          >
            <div class="scrollLeft" @click="toMallDetail(item.id)">
              <div>
                <h2>{{ item.name }}</h2>
                <p>距离{{ item.distance }}<span></span>{{ item.address }}</p>
              </div>
            </div>
            <div class="scrollRight" @click="navigator(item)">
              <div><img src="../assets/images/navigator.svg" /></div>
              <div class="txt">导航</div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { getMapLocation } from "@/utils/wx-sdk";
import wx from "weixin-js-sdk";
export default {
  data() {
    return {
      locationPoint: {
        longitude: "",
        latitude: "",
      },
      centerPoint: [119.907655, 31.00473], //范围中心点
      storeList: [],
      features: ["bg", "road", "building", "point"],
      configUrl: "",
    };
  },
  mounted() {
    this.configUrl = window.location.href;
    this.getPark();
    this.getMap();
    this.getWxConfig();
  },
  methods: {
    toMallDetail(mallid){
      console.log(mallid)
      window.location.href = 'http://newhouse.zjlaishang.com/home/mall/index.html?mall_id=' + mallid
    },
    getMap() {
      let _this = this;
      const map = new AMap.Map("aMap", {
        resizeEnable: true,
        center: _this.centerPoint,
        zoom: 16,
        pitch: 55,
        viewMode: "3D", //开启3D视图,默认为关闭
        buildingAnimation: true, //楼块出现是否带动画
      });
      var polygonArr1 = [
        [119.902665, 31.006689],
        [119.903491, 31.007825],
        [119.905889, 31.007861],
        [119.906259, 31.005645],
        [119.910631, 31.007508],
        [119.911634, 31.006326],
        [119.912171, 31.003861],
        [119.910797, 31.003698],
        [119.910717, 31.003128],
        [119.906533, 31.00264],
        [119.906533, 31.003519],
        [119.903888, 31.003408],
        [119.903657, 31.005473],
      ];
      var polygon = new AMap.Polygon({
        path: polygonArr1, //设置多边形边界路径
        strokeColor: "#FF33FF", //线颜色
        strokeOpacity: 0.2, //线透明度
        strokeWeight: 3, //线宽
        fillColor: "#1791fc", //填充色
        fillOpacity: 0.35, //填充透明度
        zIndex:10
      });
      polygon.setMap(map);
      var polygonArr2 = [
        [119.902777, 31.006668],
        [119.903507, 31.00768],
        [119.905234, 31.0078],
        [119.905358, 31.007036],
        [119.905537, 31.007046],
        [119.90576, 31.006834],
        [119.90591, 31.005731],
        [119.9037, 31.00551],
        [119.902777, 31.006668],
      ];
      new AMap.Polygon({
        path: polygonArr2, //设置多边形边界路径
        strokeColor: "#052EA2", //线颜色
        strokeOpacity: 0.2, //线透明度
        strokeWeight: 3, //线宽
        fillColor: "#052EA2", //填充色
        fillOpacity: 0.55, //填充透明度
        zIndex: 20
      }).setMap(map)

      var polygonArr3 = [
        [119.903819, 31.005313],
        [119.903905, 31.005464],
        [119.906153, 31.005381],
        [119.906206, 31.004816],
        [119.904538, 31.004756],
        [119.903819, 31.005313],
      ];
      new AMap.Polygon({
        path: polygonArr3, //设置多边形边界路径
        strokeColor: "#ED12C6", //线颜色
        strokeOpacity: 0.2, //线透明度
        strokeWeight: 3, //线宽
        fillColor: "#ED12C6", //填充色
        fillOpacity: 0.55, //填充透明度
        zIndex: 20
      }).setMap(map)

      var polygonArr4 = [
        [119.905418, 31.004738],
        [119.906335, 31.004756],
        [119.906421, 31.003616],
        [119.905611, 31.003556],
        [119.905557, 31.003942],
        [119.905461, 31.004057],
        [119.905418, 31.004738],
      ];
      new AMap.Polygon({
        path: polygonArr4, //设置多边形边界路径
        strokeColor: "#dc1a0e", //线颜色
        strokeOpacity: 0.2, //线透明度
        strokeWeight: 3, //线宽
        fillColor: "#dc1a0e", //填充色
        fillOpacity: 0.55, //填充透明度
        zIndex: 20
      }).setMap(map)
      
      var polygonArr5 = [
        [119.909339, 31.006416],
        [119.91061, 31.007055],
        [119.910787, 31.006756],
        [119.911517, 31.006113],
        [119.911506, 31.005253],
        [119.91178, 31.003883],
        [119.910224, 31.003786],
        [119.909532, 31.00603],
        [119.90943, 31.00603],
        [119.909339, 31.006416],
      ];
      new AMap.Polygon({
        path: polygonArr5, //设置多边形边界路径
        strokeColor: "#088139", //线颜色
        strokeOpacity: 0.2, //线透明度
        strokeWeight: 3, //线宽
        fillColor: "#088139", //填充色
        fillOpacity: 0.55, //填充透明度
        zIndex: 20
      }).setMap(map)
      
      var polygonArr6 = [
        [119.909065, 31.003588],
        [119.909999, 31.003639],
        [119.910069, 31.003165],
        [119.909162, 31.003147],
        [119.909065, 31.003588],
      ];
       new AMap.Polygon({
        path: polygonArr6, //设置多边形边界路径
        strokeColor: "#A0A01F", //线颜色
        strokeOpacity: 0.2, //线透明度
        strokeWeight: 3, //线宽
        fillColor: "#A0A01F", //填充色
        fillOpacity: 0.55, //填充透明度
        zIndex: 20
      }).setMap(map)


       new AMap.Text({
        text: "中心广场商业街",
        position: [119.902877,31.006997],
        height: 650,
        verticalAlign: "bottom",
        map: map,
        style: {
          "background-color": "#3366FF",
          "border-color": "white",
          color: "#fff",
          "font-size": "11px",
        },
      });
       new AMap.Text({
        text: "九汇城购物中心",
        position: [119.904092,31.005508],
        height: 650,
        verticalAlign: "bottom",
        map: map,
        style: {
          "background-color": "#ED12C6",
          "border-color": "white",
          color: "#fff",
          "font-size": "11px",
        },
      });
       new AMap.Text({
        text: "八佰伴",
        position: [119.905481,31.0044],
        height: 650,
        verticalAlign: "bottom",
        map: map,
        style: {
          "background-color": "#dc1a0e",
          "border-color": "white",
          color: "#fff",
          "font-size": "11px",
        },
      });
      new AMap.Text({
        text: "东鱼坊历史文化街区",
        position: [119.909934,31.00566],
        height: 650,
        verticalAlign: "bottom",
        map: map,
        style: {
          "background-color": "#088139",
          "border-color": "white",
          color: "#fff",
          "font-size": "11px",
        },
      });
      new AMap.Text({
        text: "中百一店",
        position: [119.909268,31.003612],
        height: 650,
        verticalAlign: "bottom",
        map: map,
        style: {
          "background-color": "#A0A01F",
          "border-color": "white",
          color: "#fff",
          "font-size": "11px",
        },
      });
    },
    //百度转高德坐标点
    bd_decrypt([bd_lng, bd_lat]) {
      var X_PI = (Math.PI * 3000.0) / 180.0;
      var x = bd_lng - 0.0065;
      var y = bd_lat - 0.006;
      var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
      var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
      var gg_lng = z * Math.cos(theta);
      var gg_lat = z * Math.sin(theta);
      return [gg_lng, gg_lat];
    },

    transDisrance(distance) {
      if (distance < 1000) {
        return distance + "米";
      } else {
        return (Math.round(distance / 100) / 10).toFixed(1) + "公里";
      }
    },
    getWxConfig() {
      console.log(this.configUrl);
      let _this = this;
      this.$request({
        url: "/api/vmarket/wechat/config",
        method: "get",
        params: {
          url: _this.configUrl,
        },
      }).then((res) => {
        let { appId, timestamp, nonceStr, signature } = res.data;
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: appId, // 必填，公众号的唯一标识
          timestamp: timestamp, // 必填，生成签名的时间戳
          nonceStr: nonceStr, // 必填，生成签名的随机串
          signature: signature, // 必填，签名，见附录1
          jsApiList: [
            "updateTimelineShareData",
            "updateAppMessageShareData",
            "getLocation",
            "openLocation",
          ], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        wx.ready(() => {
          wx.getLocation({
            type: "wgs84", // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function(res) {
              _this.locationPoint = {
                longitude: res.longitude,
                latitude: res.latitude,
              };
              _this.getPark();
            },
          });
        });
      });
    },
    getPark() {
      this.$request({
        url: "/home/map/index",
        method: "post",
        data: this.locationPoint,
      }).then((res) => {
        if (res.code == 200 && res.data.length) {
          console.log(res);
          this.storeList = [];
          res.data.forEach((item) => {
            this.storeList.push({
              id:item.id,
              name: item.name,
              distance: this.transDisrance(item.distance),
              address: item.address,
              longitude: this.bd_decrypt([item.longitude, item.latitude])[0],
              latitude: this.bd_decrypt([item.longitude, item.latitude])[1],
            });
          });
        }
      });
    },
    navigator(item) {
      //地图导航
      wx.openLocation({
        latitude: Number(item.latitude), // 纬度，浮点数，范围为90 ~ -90
        longitude: Number(item.longitude), // 经度，浮点数，范围为180 ~ -180。
        name: item.name, // 位置名
        address: item.address, // 地址详情说明
        scale: 15, // 地图缩放级别,整型值,范围从1~28。默认为最大
        infoUrl: "", // 在查看位置界面底部显示的超链接,可点击跳转
      });
    },
  },
};
</script>

<style>
p,
h2,
h1,
h3,
h4,
h5,
span {
  margin-top: 0;
}
.Body {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}
/*去除地图logo*/
.amap-logo {
  display: none !important;
}
.amap-copyright {
  display: none !important;
}
#aMap {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}
.mapBox {
  width: 100vw;
  height: 45vh;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.contBox {
  position: relative;
  z-index: 2;
  background-color: #fff;
  height: 55vh;
  width: 100vw;
  box-shadow: 0 -8px 14px rgba(0, 0, 0, 0.05);
}
.inner {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
.grayLine {
  height: 0.13rem;
  background-color: #f7f7f7;
  width: 100%;
}
.cellT {
  height: 0.9rem;
  line-height: 0.9rem;
}
.cellT .inner {
  position: relative;
  font-size: 0.42rem;
  color: #333;
  padding-left: 0.72rem;
}
.cellT .inner span {
  position: absolute;
  left: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 0.08rem;
  height: 0.35rem;
  border-radius: 0.08rem;
  background: linear-gradient(#49c8f5, #5897de);
}
.scrollBox {
  height: calc(55vh - 1.13rem);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.2rem 0.22rem;
}
.scrollBox .scrollItem {
  border-bottom: 1px solid #eee;
  padding: 0.1rem 0.15rem;
  display: flex;
  justify-content: space-between;
  height: 1.5rem;
  align-items: center;
}
.scrollBox .scrollItem .scrollLeft {
  display: flex;
  height: 1.5rem;
  align-items: center;
  width: calc(100% - 1rem);
}
.scrollBox .scrollItem h2 {
  margin-bottom: 0.1rem;
  color: #333;
  font-size: 0.37rem;
}
.scrollBox .scrollItem p {
  font-size: 0.3rem;
  color: #999;
  margin-bottom: 0;
  display: flex;
  align-items: center;
}
.scrollLeft {
  display: flex;
}
.scrollBox .scrollItem p span {
  display: inline-block;
  height: 0.5rem;
  width: 0.3rem;
  position: relative;
}
.scrollBox .scrollItem p span:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 0.18rem;
  background: #cdcdcd;
}
.scrollRight {
  width: 1rem;
  height: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 0.02rem;
}
.scrollRight .iconfont {
  font-size: 0.55rem;
  color: #5897de;
}
.scrollRight .txt {
  font-size: 0.32rem;
  color: #333;
}
.scrollRight img {
  width: 0.7rem;
  margin-top: 0.14rem;
}
.mapvr {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100000;
  background-color: #4d6bff;
  font-size: 0.33rem;
  color: #fff;
  padding: 0.1rem 0.25rem;
}
</style>
